/*
 * @Author: yangzonglong
 * @Date: 2021-05-13 15:29:53
 * @version: v1.0.0
 * @Descripttion: 手动添加全局变量
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-13 15:54:08
 * @Auditor: 
 */
import React, { useCallback, useRef } from 'react';
import { Modal } from 'antd';
import { Formx, FormxControlTypes } from '@library';
import { FormxRefProps } from '@library/components/formx/interface';
import { FormField } from './../../../interface';

const t = window.$app.t;
const required = true;

const formItems = [
  { name: 'fieldName', label: t('fieldNames'), required },
  { name: 'name', label: t('fieldNamesDesc'), required },
  { 
    name: 'type', 
    label: t('fieldNamesType'), 
    required,
    type: FormxControlTypes.SELECT,
    options: {
      dataSource: [
        { label: t('string'), value: 'text' },
        { label: t('number'), value: 'number' },
        { label: t('date'), value: 'date' }
      ]
    }
  }
]

interface IProps {
  visible: boolean;
  onCancel(): void;
  onOk(data: FormField[]): void
}

export default ({ visible, onCancel, onOk }: IProps) => {
  const formxRef = useRef<FormxRefProps>(null);

  const _onOk = useCallback(async () => {
    const formData = await formxRef.current?.validateFields();
    if(formData) onOk([formData as FormField])
  }, [onOk]);

  return (
    <Modal onOk={_onOk} visible={visible} onCancel={onCancel} title={window.$app.t('addFormVar')}>
      <Formx groupNumber={1} ref={formxRef} formItems={formItems}/>
    </Modal>
  )
}
